<template>
  <a-modal
    :title="'关联人群包'"
    :visible="visible"
    width="55%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item label="关联人群包">
            <a-select
              allow-clear
              :required="true"
              mode="multiple"
              show-search
              placeholder="请选择关联人群包"
              v-decorator="[
                  'peoplePackage',
                  {
                    rules: [{ required: true, message: '请选择关联人群包!' }]
                  }
                ]"
            >
              <a-select-option
                :value="item.groupId"
                v-for="(item,index) in bagList"
                :key="index"
              >
                {{ item.groupName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-row style="margin-top:10px">
            <a-col
              :span="8"
              :offset="4"
            >
              <div
                @click="reset"
                class="reset"
              >
                取消
              </div>

            </a-col>
            <a-col :span="8">
              <a-button
                class="submit"
                :loading="loading"
                @click="handleSubmit"
              >
                提交
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { tagCreate, tagUpdate, bagList, connectBag } from '@api/label/index'
import { values } from 'lodash'

export default {
  components: {},

  props: {
    bag: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      loading: false,
      useChanel: [],
      bagList: [],
      visible: false,
      tagId: '',
      peoplePackage: [],
      ids: [],
      form: this.$form.createForm(this)
    }
  },

  created() {
    // const { bag } = this.$props
    // this.tagId = bag.id
    // this.ids = bag.peoplePackageIds
    // if (this.ids) {
    //   this.$nextTick(() => {
    //     this.getBagList()
    //   })
    // }
  },

  mounted() {},
  methods: {
    show(record) {
      this.visible = true
      this.tagId = record.id
      this.ids = record.peoplePackageIds
      if (this.ids) {
        this.$nextTick(() => {
          this.getBagList()
        })
      }
    },
    async getBagList() {
      const params = {}
      const res = await bagList('tag', params)
      if (res.code == 200) {
        this.bagList = res.data
        const peoplePackageIds = []
        this.ids.map(item => {
          this.bagList.map(subitem => {
            if (item == subitem.id) {
              peoplePackageIds.push(subitem.groupId)
            }
          })
        })
        this.$nextTick(() => {
          if (peoplePackageIds) {
            this.form.setFieldsValue({ peoplePackage: peoplePackageIds })
          }
        })
      } else {
        this.$message.warning(res.msg)
      }
    },
    reset() {
      this.form.resetFields()
      this.visible = false
    },
    async handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    async submit(values) {
      console.log(values)
      this.peoplePackage = []
      this.$message.warning('数据开始同步，由于数据量较大，请耐心等候！')
      let that = this
      this.visible = false
      that.bagList.map(item => {
        values.peoplePackage.map(subitem => {
          if (item.groupId == subitem) {
            that.peoplePackage.push(item.id)
          }
        })
      })
      const params = {
        peoplePackageIds: that.peoplePackage,
        id: this.tagId
      }
      console.log(params);
      try {
        const res = await connectBag('tag', params)
      } catch (error) {
      } finally {
        that.$emit('changeData')
      }
    }
  }
}
</script>
<style scoped lang="less">
.ml-20 {
  margin-left: 20px;
}
.submit {
  margin-left: 8px;
  background: #409eff;
  width: 110px;
  border-radius: 10px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
}
.reset {
  width: 110px;
  border-radius: 10px;
  height: 40px;
  border: 1px solid #969799;
  text-align: center;
  line-height: 40px;
}
</style>
